<template>
  <view style="padding-top: 54px;">
    <div class="lxColumn lx-nav-bar">
      <div class="bar lxCenterRow">
        <up-icon name="arrow-left" color="#606266" size="24" @click="back" style="margin-right: 6px;"></up-icon>
        <up-search v-model="keyword" :show-action="true" actionText="搜索" :animation="true" shape="square"
          @search="doSearch" @custom="doSearch" @change="doSearch"></up-search>
      </div>
    </div>
    <div v-if="keyword" class="main-content">
      <up-grid :border="false" col="2">
        <up-grid-item v-for="(item, ii) in arr" :key="ii">
          <div class="lxCenterColumn question-box">
            <image :src="item.cover" class="cover" style="background-color: black;" mode="aspectFill" />
            <image :src="playIcon" class="cover" mode="aspectFill" @click="play(item)" />
            <div class="question-name lxCenterR">{{ item.name }}</div>
          </div>
        </up-grid-item>
      </up-grid>
    </div>
    <div v-else class="main-content">
      <up-grid :border="false" col="2">
        <up-grid-item v-for="(item, ii) in questions" :key="ii">
          <div class="lxCenterColumn question-box">
            <image :src="item.cover" class="cover" style="background-color: black;" mode="aspectFill" />
            <image :src="playIcon" class="cover" mode="aspectFill" @click="play(item)" />
            <div class="question-name lxCenterR">{{ item.name }}</div>
          </div>
        </up-grid-item>
      </up-grid>
    </div>
    <video v-if="showVideo" :src="currentVideoUrl" objectFit="contain" class="videoPlayer" autoplay></video>
    <view v-if="showVideo" class="closeVideo lxCenterC" @click="stopVideo">
      <image src="https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/closeVideo.png"
        style="width: 80rpx; height: 80rpx"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showVideo: false,
      playIcon: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/play-icon.png',
      currentVideoUrl: '',
      questions: [],
      sId: null,
      keyword: '',
      arr: [],
    }
  },

  onLoad(option) {
    this.sId = option.i
    this.getQuestions()
    uni.setNavigationBarTitle({
      title: `安装视频`
    })
  },

  methods: {
    back() {
      uni.reLaunch({ url: '/pages/index/index' })
    },
    doSearch() {
      const arr = []
      this.questions.forEach((item) => {
        if (item.name.indexOf(this.keyword) > -1) {
          arr.push(item)
        }
      })
      this.arr = arr
    },
    play(item) {
      console.log('item :', '⭕️', JSON.stringify(item, null, 2));
      // window.open(item.video, '_blank');
      this.currentVideoUrl = item.video
      this.showVideo = true
    },
    stopVideo() {
      this.showVideo = false
    },
    getQuestions() {
      uni.request({
        url: `https://www.insist.life:9999/help/s${this.sId}`,
        success: (res) => {
          const data = res.data.data || []
          data.forEach((item) => {
            item.cover = item.video + '?x-oss-process=video/snapshot,t_0,f_jpg,w_800,m_fast'
          })
          console.log('data :', '⭕️', JSON.stringify(data, null, 2));
          this.questions = data
        },
      })
    },
  },
}
</script>

<style>
.lx-nav-bar {
  height: 44px;
  width: 100vw;
  position: fixed;
  background-color: white;
  z-index: 99998;
  top: 0;
  left: 0;

  .bar {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 93vw;
    margin-left: 2vw;
  }
}

.main-content {
  margin-left: 4vw;
  width: 92vw;
  margin-top: 2vw;
}

.question-box {
  position: relative;
  padding-bottom: 80vw;

  .question-name {
    top: 71vw;
    left: -20vw;
    color: #606266;
    position: absolute;
    width: 39vw;
  }

  .cover {
    position: absolute;
    width: 39vw;
    height: 70vw;
    top: 0;
    left: -20vw;
  }
}

.videoPlayer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  z-index: 99998;
}

.closeVideo {
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  top: 20rpx;
  right: 10rpx;
  z-index: 99999;
}
</style>
